<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>系统监控</title>
    <style>
        .layui-card-body {
            height: 150px;
        }
    </style>
    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>
</head>
<body>
<!-- 标题 -->
<h1 style="text-align: center;">系统环境监控</h1>
<h6 style="text-align: center;">5秒刷新一次</h6>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">CPU</div>
                <div class="layui-card-body">
                    <p>核心数：<span id="cpu-cpuNum"></span></p>
                    <p>用户使用率：<span id="cpu-used"></span></p>
                    <p>系统使用率：<span id="cpu-sys"></span></p>
                    <p>当前空闲率：<span id="cpu-free"></span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">内存</div>
                <div class="layui-card-body">
                    <p>总内存：<span id="memory-total">0G</span></p>
                    <p>已用内存：<span id="memory-used">0G</span></p>
                    <p>剩余内存：<span id="memory-free">0G</span></p>
                    <p>使用率：<span id="memory-useRate">0%</span></p>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">Java虚拟机信息</div>
                <div class="layui-card-body">
                    <p>Java名称：<span id="jvmVo-jdkName"></span></p>
                    <p>Java版本：<span id="jvmVo-jdkVersion"></span></p>
                    <p>启动时间：<span id="jvmVo-jdkStartTime"></span></p>
                    <p>运行时长：<span id="jvmVo-jdkRunTime"></span></p>
                    <p>安装路径：<span id="jvmVo-jdkHome"></span></p>
                    <p>项目路径：<span id="systemVo-userDir"></span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">JVM</div>
                <div class="layui-card-body">
                    <p>总内存：<span id="jvmVo-total">0M</span></p>
                    <p>已用内存：<span id="jvmVo-used">0M</span></p>
                    <p>剩余内存：<span id="jvmVo-free">0M</span></p>
                    <p>使用率：<span id="jvmVo-useRate">0%</span></p>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body">
                    <p>服务器名称：<span id="systemVo-computerName"></span></p>
                    <p>服务器IP：<span id="systemVo-computerIp"></span></p>
                    <p>操作系统：<span id="systemVo-osName"></span></p>
                    <p>系统架构：<span id="systemVo-osArch"></span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">磁盘状态</div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr>
                            <th>盘符路径</th>
                            <th>文件系统</th>
                            <th>盘符类型</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>已用百分比</th>
                        </tr>
                        </thead>
                        <tbody id="hardDisk">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/common/jquery/jquery.js}"></script>
<script th:inline="javascript">

    //websocket对象
    let websocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //动态获取域名或ip
        let hostname = window.location.hostname;
        let port = window.location.port;
        websocket = new WebSocket("ws://" + hostname + ":" + port + "/websocket/monitor");
    } else {
        console.error("不支持WebSocket");
    }

    //连接发生错误的回调方法
    websocket.onerror = function (e) {
        console.error("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("WebSocket连接成功")
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        //追加
        if (event.data) {
            let monitorJson = JSON.parse(event.data);
            $("#cpu-cpuNum").text(monitorJson.cpuVo.cpuNum);
            $("#cpu-used").text(monitorJson.cpuVo.used);
            $("#cpu-sys").text(monitorJson.cpuVo.sys);
            $("#cpu-free").text(monitorJson.cpuVo.free);

            $("#memory-total").text(monitorJson.memoryVo.total + 'G');
            $("#memory-used").text(monitorJson.memoryVo.used + 'G');
            $("#memory-free").text(monitorJson.memoryVo.free + 'G');
            $("#memory-useRate").text(monitorJson.memoryVo.useRate + '%');

            $("#jvmVo-jdkName").text(monitorJson.jvmVo.jdkName);
            $("#jvmVo-jdkVersion").text(monitorJson.jvmVo.jdkVersion);
            $("#jvmVo-jdkStartTime").text(monitorJson.jvmVo.jdkStartTime);
            $("#jvmVo-jdkRunTime").text(monitorJson.jvmVo.jdkRunTime);
            $("#jvmVo-jdkHome").text(monitorJson.jvmVo.jdkHome);
            $("#systemVo-userDir").text(monitorJson.systemVo.userDir);

            $("#jvmVo-total").text(monitorJson.jvmVo.total + 'M');
            $("#jvmVo-used").text(monitorJson.jvmVo.used + 'M');
            $("#jvmVo-free").text(monitorJson.jvmVo.free + 'M');
            $("#jvmVo-useRate").text(monitorJson.jvmVo.useRate + '%');

            $("#systemVo-computerName").text(monitorJson.systemVo.computerName);
            $("#systemVo-computerIp").text(monitorJson.systemVo.computerIp);
            $("#systemVo-osName").text(monitorJson.systemVo.osName);
            $("#systemVo-osArch").text(monitorJson.systemVo.osArch);

            var arr = monitorJson.hardDiskVos;
            $('#hardDisk').html('');
            for (var i = 0, len = arr.length; i < len; i++) {
                var html = '<tr>' +
                    '<td>'+ arr[i].dirName +'</td>' +
                    '<td>'+ arr[i].sysTypeName +'</td>' +
                    '<td>'+ arr[i].typeName +'</td>' +
                    '<td>'+ arr[i].total +'</td>' +
                    '<td>'+ arr[i].free +'</td>' +
                    '<td>'+ arr[i].used +'</td>' +
                    '<td>'+ arr[i].usage +'%</td>' +
                    '</tr>';
                $('#hardDisk').append(html);
            }

        }
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭")
    };
</script>
</body>
</html>